<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>发布社团招募</title>
    <script type="text/javascript" src="${ctx}/static/myJs/util.js"></script>
    <script type="text/javascript" src="${ctx}/static/myJs/groupRecruitController.js"></script>
    <link href="${ctx}/static/datetimepicker/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
</head>
<body>
<div class="content">
        <input type="hidden" name="id" id="id" value="${groupRecruit.id}"/>
        <div class="form-group">
            <h3 class="item-title">基础信息</h3>

            <div class="form-item">
                <label for="">标题</label>
                <input type="text" class="form-control" id="title" value="${groupRecruit.title}" placeholder="简短的描述">
            </div>
            <div class="form-item">
                <label for="">有效期</label>
                <div id="stopDate" class="input-group date form_date col-md-5" data-date=""
                     data-date-format="yyyy-mm-dd"
                     data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" id="inputStartDate" value="${fn:substring(groupRecruit.stopApplyTime, 0, 10)}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value=""/><br/>

            </div>
            <div class="form-item">
                <label for="">人数限制</label>
                <input type="text" class="form-control" id="needs" value="${groupRecruit.needs}" placeholder="招募人数">
            </div>

            <div class="form-item">
                <label for="">联系人</label>
                <input type="text" class="form-control" id="linkman" value="${groupRecruit.linkman}" placeholder="联系人">
            </div>

            <div class="form-item">
                <label for="">联系电话</label>
                <input type="text" class="form-control" id="phone" value="${groupRecruit.phone}" placeholder="联系电话">
            </div>

        </div>
        <div class="form-group">
            <h3 class="item-title">技能要求</h3>

            <div class="form-item">
                <label class="form-item-title" for="">职业</label>
                <c:forEach items="${userJob}" var="skill">
                    <div class="checkbox checkbox-item">
                        <label><input type="checkbox" name="job" <c:if test="${groupRecruit.job.contains(skill.name)}">checked </c:if> value="${skill.name}">${skill.name}</label>
                    </div>

                </c:forEach>
            </div>
            <div class="form-item">
                <label class="form-item-title" for="">专业技能</label>
                <c:forEach items="${userSkill}" var="skill">
                    <div class="checkbox checkbox-item">
                        <label><input type="checkbox" name="skill" <c:if test="${groupRecruit.skill.contains(skill.name)}">checked </c:if> value="${skill.name}">${skill.name}</label>
                    </div>
                </c:forEach>
            </div>
            <div class="form-item">
                <label class="form-item-title" for="">服务领域</label>
                <c:forEach items="${userServiceFiled}" var="skill">
                    <div class="checkbox checkbox-item">
                        <label><input type="checkbox" name="serviceField" <c:if test="${groupRecruit.serviceField.contains(skill.name)}">checked </c:if> value="${skill.name}">${skill.name}</label>
                    </div>
                </c:forEach>
            </div>
        </div>


        <div class="page-volunteer-recruitment-grid">
            <label for="">封面</label>
            <ul>
                <li>
                    <div class="volunteer-recruitment-card">

                        <div class="cover2">
                            <img alt="" height="160px" src="${groupRecruit.img}" id="groupRecruitImg">
                        </div>

                    </div>
                </li>
            </ul>
            <button class="btn" data-toggle="modal" data-target="#myModalRecruitImg">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </button>
        </div>


        <div class="form-group">
            <div class="form-item">
                <label for="">招募说明</label>
                <textarea class="form-control" id="demo">${groupRecruit.demo}</textarea>
            </div>
        </div>
        <div>
            <button class="btn" onclick="javascript:next();">下一步</button>
            <button class="btn" onclick="history.back(-1);">返回</button>
        </div>

    <div class="modal fade" id="myModalRecruitImg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="page-volunteer-recruitment-grid">
                        <ul>
                            <c:forEach items="${recruitImgs}" var="img">
                                <li>
                                    <div class="volunteer-recruitment-card">
                                        <div class="cover2">
                                            <a class="frame-border" href="javascript:void(0);" onclick="javascript:selectImg('${img.name}');">
                                                <img alt="" height="160px" src="${img.name}"></a>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">关闭</button>
                    <button class="btn" onclick="javascript:addQuestion();">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#stopDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        startDate:new Date(),
        forceParse: 0
    });
    function next()
    {
        var id=$('#id').val();
        var title = $('#title').val();
        if(title==undefined || title=="" || title==null)
        {
            alert("标题不能为空");
            return false;
        }
        var stopDate = $('#inputStartDate').val();
        if(stopDate==undefined || stopDate=="" || stopDate==null)
        {
            alert("有效期不能为空");
            return false;
        }
        var needs = $('#needs').val();
        var linkman = $('#linkman').val();
        if(linkman==undefined || linkman=="" || linkman==null)
        {
            alert("联系人不能为空");
            return false;
        }
        var phone = $('#phone').val();
        if(phone==undefined || phone=="" || phone==null)
        {
            alert("联系电话不能为空");
            return false;
        }
        var job = "";
        $('input:checkbox[name=job]:checked').each(function (i) {
            if (0 == i) {
                job = $(this).val();
            } else {
                job += (";" + $(this).val());
            }
        });
        if(job==undefined || job=="" || job==null)
        {
            alert("职业不能为空");
            return false;
        }
        var skill = "";
        $('input:checkbox[name=skill]:checked').each(function (i) {
            if (0 == i) {
                skill = $(this).val();
            } else {
                skill += (";" + $(this).val());
            }
        });
        if(skill==undefined || skill=="" || skill==null)
        {
            alert("专业技能不能为空");
            return false;
        }
        var serviceField = "";
        $('input:checkbox[name=serviceField]:checked').each(function (i) {
            if (0 == i) {
                serviceField = $(this).val();
            } else {
                serviceField += (";" + $(this).val());
            }
        });
        if(serviceField==undefined || serviceField=="" || serviceField==null)
        {
            alert("服务领域不能为空");
            return false;
        }
        var img = $('#groupRecruitImg')[0].src;
        if(img==undefined || img=="" || img==null)
        {
            alert("封面不能为空");
            return false;
        }
        var demo = $('#demo').val();
        if(demo==undefined || demo=="" || demo==null)
        {
            alert("招募说明不能为空");
            return false;
        }
        var question="${groupRecruit.question}";
        //alert(id + "," + title + "," +stopDate + "," + needs + "," + linkman + "," + phone + "," + job+ "," + skill + "," + serviceField + "," + img + "," + demo);
        var param = "id="+id + "&title="+title + "&stopDate=" + stopDate + "&needs="+needs + "&linkman=" + linkman + "&phone="+phone + "&job="+job + "&skill="+skill +"&serviceField="+serviceField+ "&img="+img + "&demo="+demo + "&question="+question;
        window.location.href="${ctx}/groupRecruit/question?"+param;
    }
    function selectImg(imgUrl)
    {
        $('#groupRecruitImg').attr('src',imgUrl);
        $('#myModalRecruitImg').modal('hide');
    }
</script>
</body>
</html>
